<template>
    <div class="big-box clearficx">
        <div class="box-left">
            <div class="nav-left-top">
                <div class="nav-left-top-text active-left" @click="btnShow">练习室<span class="icon">
                        <ArrowDown v-if="flag"/><ArrowRight v-else/>
                    </span></div>
                <div class="navigation-sub-content" v-show="flag" @click="toRoom">我的练习室</div>
            </div>
            <div class="nav-box">
                <div class="navigation-item">缓存</div>
                <div class="navigation-item">音频库</div>
                <div class="navigation-item">收藏</div>
                <div class="navigation-item" @click="toHistory">历史</div>
            </div>
        </div>
       <router-view></router-view>
    </div>
</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    UploadFilled,
    Top,
    Bottom,
    InfoFilled,
    ArrowDown,
    ArrowRight
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref } from 'vue'
import router from '../../router/index'
//控制左侧练习室显示隐藏
let flag = ref(false)
const btnShow = () => {
    flag.value = !flag.value
}
const toRoom =()=>{
    router.push({path:'/training/room'})
}
const toHistory=()=>{
    router.push({path:'/training/history'})
}
</script>

<style scoped>
.big-box {
    margin: 10px auto;
    width: 1200px;
    background: #f4f4f4e9;
}

.nav-left-top {
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 5px 0;
    margin-bottom: 10px;
    margin-bottom: 10px;
}

.nav-box {
    margin-top: 10px;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 5px 0;
    margin-bottom: 10px;
}

.box-left {
    float: left;
    width: 200px;
    margin: 10px 0 0 5px;
}

.nav-left-top-text {
    font-size: 14px;
    color: #111;
    padding: 17px 21px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.nav-left-top-text .icon {
    float: right;
    width: 20px;
    height: 20px;
}

.navigation-sub-content {
    color: #f93684;
    font-size: 14px;
    padding: 12px 0 12px 49px;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.navigation-item {
    font-size: 14px;
    color: #111;
    padding: 17px 21px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition: all .7s;
}

.navigation-item:hover {
    border-left: 3px solid #f93684;
}

.active-left {
    border-left: 3px solid #f93684;
}

/* ====================================================== */




.clearficx::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearficx {
    *zoom: 1;
}
</style>